import React, {Component} from "react";
import PropTypes from 'prop-types';
import Todo from "../todo/Todo";

class TodoList extends Component {
  render () {
    let {todos, onTodoClick} = this.props;

    return (
      <ul>
        {todos.map((todo, index) => (
          <Todo key={todo.id} onClick={() => onTodoClick(index)} {...todo}/>
        ))}
      </ul>
    )
  }
}

TodoList.propTypes = {
  todos: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      completed: PropTypes.bool.isRequired,
      text: PropTypes.string.isRequired
    })
  ),
  onTodoClick: PropTypes.func
};

export default TodoList;